<template>
  <div class="job-detail-box" v-if="JSON.stringify(jobDetail) !== '[]'">
    <div class="job-detail-header has-shadow">
      <div class="job-header-info">
        <div class="job-detail-info">
          <span class="job-name" style="max-width: 442px">{{ job.jobInfo.jobName }}</span
          ><span class="job-salary">{{ job.jobInfo.salary }}</span>
        </div>
        <ul class="tag-list">
          <li><a href="/c101280600/" :title="job.jobInfo.workLocation.location.split('.')[0] + '招聘'">{{job.jobInfo.workLocation.location.split('.')[0]}}</a></li>
          <li>{{job.jobInfo.tag[0]}}</li>
          <li>{{job.jobInfo.tag[1]}}</li>
        </ul>
      </div>
      <div class="job-detail-op clearfix">
        <a
          href="javascript:;"
          ka="popjob_interest_tosign_c333c1287fae91f71HZ93tW6E1JX"
          class="op-btn op-btn-like"
          >感兴趣</a
        ><!----><a
          href="javascript:;"
          ka="cpc_job_list_chat_c333c1287fae91f71HZ93tW6E1JX"
          class="op-btn op-btn-chat"
          @click="toMessage"
          >立即沟通</a
        >
      </div>
    </div>
    <div class="job-detail-body">
      <h3 class="title">
        职位描述：
        <a ka="job_detail_report" href="javascript:;" class="link-report">举报</a
        ><a
          ka="job_detail_wechat_share"
          href="javascript:;"
          data-url="/wapi/zpgeek/job/share/qr.json?jobId=c333c1287fae91f71HZ93tW6E1JX&amp;source=2"
          class="link-wechat-share"
          >微信扫码分享</a
        ><!---->
      </h3>
      <ul class="job-label-list">
        <li v-for="(tag,index) in job.jobInfo.tag" :key="index">{{tag}}</li>
      </ul>
      <p class="desc">
        {{job.jobInfo.desc}}
      </p>
      <div class="job-boss-info">
        <div class="detail-figure">
          <img
            :src="job.bossInfo.imgUrl"
          />
        </div>
        <h2 class="name">
          {{job.bossInfo.name}}<i class="icon-vip"></i><span class="boss-active-time">刚刚活跃</span>
        </h2>
        <div class="boss-info-attr">{{job.bossInfo.posts}}</div>
      </div>
      <div class="job-address">
        <span class="job-address-title">工作地址：</span>
        <p class="job-address-desc">{{job.jobInfo.workLocation.location}}</p>
        <div ka="open_map_detail_click" class="map-box-wrapper">
          <img
            :src="job.jobInfo.workLocation.locationUrl"
            :alt="job.jobInfo.workLocation.location"
          />
          <p class="address-map-btn">点击查看地图</p>
        </div>
      </div>
      <!----><a
        href="/job_detail/c333c1287fae91f71HZ93tW6E1JX.html?securityId=C6uOTPNY0M8EM-J1zLM193bZ9vkpC03UEuxqPgAT25wxNoLfN1OTTXa8j69piV0WqCfHpLfKFnec3BPxzPQD8PtSt1ibSDE~"
        ka="company_more_job_c333c1287fae91f71HZ93tW6E1JX"
        target="_blank"
        class="more-job-btn"
        >查看更多信息</a
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { reactive } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { storeToRefs } from 'pinia'
import { getJobDetail } from '@/api/mock'

const userStore = useUserStore()
const { jobData } = storeToRefs(userStore)
const jobDetail = reactive([])
const router = useRouter()
const job = computed(() => jobDetail.filter(item => item.jobInfo.id === parseInt(jobData.value.jobId))[0])

getJobDetail().then((val) => {
  const arr: Array<any> = val
  Object.assign(jobDetail, arr.slice(0, val.length))
  console.log("jobData",jobData.value);
  console.log("jobDetail",jobDetail);
})
// jobData.value = userStore.jobData

const data = {
  id: 1,
  imgUrl:
    'https://img.bosszhipin.com/beijin/upload/avatar/20230812/607f1f3d68754fd0b12b6bcdec2a25dcb163e708d79de589249f99c7dcd9b7b26ddf073d33b57240_s.jpg.webp',
  name: '刘颖慧',
  company: '新化县东方城市广...',
  posts: '经理',
  message: '好的',
  time: '昨天 14:50',
  messageList: [],
  positionName: '主管',
  salary: '4-5K',
  city: '娄底',
  communicate: false,
  greeting: true,
  interview: false
}
function toMessage() {
  const item = JSON.stringify(data)
  router.push({
    path: '/geek/Message',
    query: { item }
  })
}
</script>
